<template>
	<view class="withdrawal-account-container">
<up-navbar :title="t('Withdrawal account')" @click="goWithdraw" :autoBack="true">
						<template #left>
						  <view class="nav-back-btn">
						    <image class="back-icon" src="@/static/img/left.png"></image>
						  </view>
						</template>
					</up-navbar>

		
		<view class="header-section">
			<view class="title-section">
				<text class="main-title">{{t('Withdrawal')}}</text>
				<text class="main-title">{{t('Account')}}</text>
			</view>
			<view class="credit-card-3d">
				<view class="card-body">
					<view class="card-chip"></view>
					<view class="card-logo"></view>
					<view class="card-stripe"></view>
				</view>
			</view>
		</view>

		
		<view class="form-section">
			<view class="input-group">
				<text class="input-label">{{t('Select Bank')}}</text>
				<view class="bank-select-input" @click="showBankSelector">
					<input 
						v-model="baseData.cardForm.ifsc" 
						type="text"
						:placeholder="t('Please select bank')"
						class="form-input bank-input"
						readonly
						disabled="true"
					/>
					<text class="arrow-icon">›</text>
				</view>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Account Number')}}</text>
				<input 
					v-model="baseData.cardForm.account_num" 
					type="text"
					:placeholder="t('Please Enter')"
					class="form-input"
				/>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Account Holder Name')}}</text>
				<input 
					v-model="baseData.cardForm.holder_name" 
					type="text"
					:placeholder="t('Please Enter')"
					class="form-input"
				/>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Email')}}</text>
				<input 
					v-model="baseData.cardForm.accEmail" 
					type="email"
					:placeholder="t('Please Enter')"
					class="form-input"
				/>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Account Phone')}}</text>
				<input 
					v-model="baseData.cardForm.acc_phone" 
					type="tel"
					:placeholder="t('Please Enter')"
					class="form-input"
				/>
			</view>
		</view>

		
		<view class="submit-section">
			<view class="submit-button" @click="addBank">
				<text class="submit-text">{{t('Save')}}</text>
			</view>
		</view>

		
		<view class="note-section">
			<text class="note-title">{{t('Important Notes')}}</text>
			<text class="note-text">• {{t('Please ensure all information is accurate')}}</text>
			<text class="note-text">• {{t('Account number must be numeric only')}}</text>
			<text class="note-text">• {{t('Account holder name should contain only letters')}}</text>
			<text class="note-text">• {{t('Email format must be valid')}}</text>
		</view>

		
		<up-popup :show="showBankPopup" v-model="baseData.cardForm.bankName" mode="bottom" border-radius="10" class="custom-width-bottom">
			<view class="bank-popup">
				<view class="bank-popup-header">
					<text class="bank-popup-title">{{t('Select Bank')}}</text>
					<view class="bank-popup-close" @click="closeBankPopup">
						<up-icon name="close" size="1.5rem"></up-icon>
					</view>
				</view>

				<scroll-view scroll-y="true" class="bank-list" style="max-height: 60vh;">
					<view class="bank-item" v-for="(bank, index) in bankName" :key="index" @click="selectBank(bank)">
						{{ bank.label }}
					</view>
				</scroll-view>
			</view>
		</up-popup>

		
		<a :href="baseData.aircraftUrl" target="_blank">
			<img style="width: 2rem; height: 2rem; position: fixed; bottom: 30vh; right: 6px; z-index: 99999;" src="@/static/teltgram.png" />
		</a>
	</view>
</template>

<script setup lang="ts">
	import { useI18n } from 'vue-i18n';
	import { onMounted, reactive, ref } from 'vue'
	import { setBankCard, bankCardInfo } from '@/api/user'
	

	const { t } = useI18n();
	const baseData = reactive({
		aircraftUrl: uni.getStorageSync('aircraftUrl'),
		cardForm: {
			ifsc: null,
			holder_name: null,
			account_num: null,
			country: 3,
			ac_type: 1,
			platform: 3,
			acc_phone: null,
			accEmail: ''
		}
	})
	const bankName = ref([
		{ label: "OPAY(PAYCOM)", value: "NGN001" },
		{ label: "PalmPay", value: "NGN002" },
		{ label: "Access Bank", value: "NGN003" },
		{ label: "Ecobank Nigeria", value: "NGN004" },
		{ label: "Enterprise Bank", value: "NGN005" },
		{ label: "Fidelity Bank", value: "NGN006" },
		{ label: "First Bank of Nigeria", value: "NGN007" },
		{ label: "First City Monument Bank", value: "NGN008" },
		{ label: "Globus Bank", value: "NGN009" },
		{ label: "Jaiz Bank", value: "NGN010" },
		{ label: "Keystone Bank", value: "NGN011" },
		{ label: "Kuda Bank", value: "NGN012" },
		{ label: "One Finance", value: "NGN013" },
		{ label: "Parallex Bank", value: "NGN014" },
		{ label: "Polaris Bank", value: "NGN015" },
		{ label: "Providus Bank", value: "NGN016" },
		{ label: "Stanbic IBTC Bank", value: "NGN017" },
		{ label: "Standard Chartered Bank", value: "NGN018" },
		{ label: "Sterling Bank", value: "NGN019" },
		{ label: "Suntrust Bank", value: "NGN020" },
		{ label: "Sparkle Microfinance Bank", value: "NGN021" },
		{ label: "TAJ Bank", value: "NGN022" },
		{ label: "Union Bank of Nigeria", value: "NGN023" },
		{ label: "United Bank For Africa", value: "NGN024" },
		{ label: "Unity Bank", value: "NGN025" },
		{ label: "VFD Microfinance Bank", value: "NGN026" },
		{ label: "Wema Bank", value: "NGN027" },
		{ label: "Zenith Bank", value: "NGN028" },
		{ label: "Moniepoint Microfinance Bank", value: "NGN029" },
		{ label: "9 Payment Service Bank", value: "NGN001" },
		{ label: "ABBEY MORTGAGE BANK", value: "NGN002" },
		{ label: "ACCESS BANK PLC", value: "NGN003" },
		{ label: "AccessMobile", value: "NGN004" },
		{ label: "ACCION MICROFINANCE BANK", value: "NGN005" },
		{ label: "ADDOSSER MICROFINANCE BANK", value: "NGN006" },
		{ label: "AG MORTGAGE BANK PLC", value: "NGN007" },
		{ label: "AL", value: "NGN008" },
		{ label: "AMJU UNIQUE MICROFINANCE BANK", value: "NGN009" },
		{ label: "AMML MFB", value: "NGN010" },
		{ label: "ASO SAVINGS AND LOANS", value: "NGN011" },
		{ label: "BAINES CREDIT MFB", value: "NGN012" },
		{ label: "Boctrust Microfinance Bank", value: "NGN013" },
		{ label: "BOWEN MICROFINANCE BANK", value: "NGN014" },
		{ label: "BRENT MORTGAGE BANK", value: "NGN015" },
		{ label: "CELLULANT", value: "NGN016" },
		{ label: "CEMCS MICROFINANCE BANK", value: "NGN017" },
		{ label: "CENTRAL BANK OF NIGERIA", value: "NGN018" },
		{ label: "ChamsMobile", value: "NGN019" },
		{ label: "CIT MICROFINANCE BANK", value: "NGN020" },
		{ label: "Citibank Nigeria LTD", value: "NGN021" },
		{ label: "CONSUMER MICROFINANCE BANK", value: "NGN022" },
		{ label: "CONTEC GLOBAL INFOTECH LIMITED (NOWNOW)", value: "NGN023" },
		{ label: "Coronation Merchant Bank", value: "NGN024" },
		{ label: "Covenant", value: "NGN025" },
		{ label: "CREDIT AFRIQUE MICROFINANCE BANK", value: "NGN026" },
		{ label: "DAYLIGHT MICROFINANCE BANK", value: "NGN027" },
		{ label: "DIAMOND BANK PLC", value: "NGN028" },
		{ label: "Eartholeum", value: "NGN029" },
		{ label: "ECOBANK NIGERIA PLC", value: "NGN030" },
		{ label: "EcoMobile", value: "NGN031" },
		{ label: "EKONDO MICROFINANCE BANK", value: "NGN032" },
		{ label: "EMPIRE TRUST BANK", value: "NGN033" },
		{ label: "eTranzact", value: "NGN034" },
		{ label: "Fairmoney Microfinance", value: "NGN035" },
		{ label: "FAST MICROFINANCE BANK", value: "NGN036" },
		{ label: "FBN Mortgages Limited", value: "NGN037" },
		{ label: "FBNMobile", value: "NGN038" }
	])

	const showBankPopup = ref(false);
	
	const showBankSelector = () => {
		showBankPopup.value = true;
	}



	const closeBankPopup = () => {
		showBankPopup.value = false;
	}


	const selectBank = (bank) => {
		baseData.cardForm.ifsc = bank.label;
		showBankPopup.value = false;
	}

	const getBankLabel = (ifscCode : any) => {
		const bank = bankName.value.find(item => item.value === ifscCode);

		return bank ? bank.label : null;
	};

	const getBankValue = (ifscCode : any) => {

		const bank = bankName.value.find(item => item.label === ifscCode);

		return bank ? bank.value : null;
	};
	const createDefaultCardForm = ref({
		ifsc: null,
		holder_name: null,
		account_num: null,
		country: 2,
		acc_phone: null,
		ac_type: 1,
		platform: 1,
		ext: { accEmail: null }
	})
	const addBank = async () => {
		if (!baseData.cardForm.account_num) {
			uni.showToast({
				title: t('Please fill in') + t('Account Number'),
				icon: "none"
			})
			return
		}
		const regex = /^\d+$/
		if (!regex.test(baseData.cardForm?.account_num)) {
			uni.showToast({
				title: t('account must be numeric'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.holder_name) {
			uni.showToast({
				title: t('Please fill in') + t('Account Holder Name'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.ifsc) {
			uni.showToast({
				title: t('Please fill in') + 'ifsc',
				icon: "none"
			})
			return
		}
		const holder_nameregex = /^[A-Za-z\s]+$/;
		if (!holder_nameregex.test(baseData.cardForm?.holder_name)) {
			uni.showToast({
				title: t('Account name error'),
				icon: "none"
			})
			return
		}
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
		if (!emailRegex.test(baseData.cardForm.accEmail)) {
			uni.showToast({
				title: t('Invalid Email Format'),
				icon: 'none',
			})
			return
		}
		if (!baseData.cardForm.acc_phone) {
			uni.showToast({
				title: t('Please fill in') + t('Phone'),
				icon: "none"
			})
			return
		}
		baseData.cardForm.holder_name = baseData.cardForm.holder_name?.replace(/\s*/g, '');
		baseData.cardForm.country = 3;
		baseData.cardForm.ac_type = 1;
		const ifscCode = baseData.cardForm.ifsc;
		baseData.cardForm.ifsc = getBankValue(ifscCode);
		
		Object.assign(
			createDefaultCardForm.value,
			(({ ac_type, country, holder_name, acc_phone, ifsc, account_num, platform }) =>
				({ ac_type, country, holder_name, acc_phone, ifsc, account_num, platform }))(baseData.cardForm)
		)

		
		createDefaultCardForm.value.ext = {
			...(createDefaultCardForm.value.ext || {}),
			accEmail: baseData.cardForm.accEmail ?? baseData.cardForm.accEmail ?? ''
		}
		const res = await setBankCard(createDefaultCardForm.value)
		if (res.code == 0) {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
			goWithdraw()
		} else {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
		}
	}

		const goWithdraw = () => {
			window.top?.postMessage('/pages/withdraw/index', window.location.origin)
			uni.navigateTo({
			  url: '/pages/withdraw/index',
			})
		}
	const getCard = async () => {
		const ress = await bankCardInfo({ country: 3, platform: baseData.cardForm.platform })
		if (ress.code == 0) {
			baseData.cardForm = ress.data.length > 0 ? ress.data[0] : {
				ifsc: null,
				holder_name: null,
				account_num: null,
			},
				baseData.cardForm.platform = uni.getStorageSync('platform');
			baseData.cardForm.ext = baseData.cardForm.ext || {};
			baseData.cardForm.accEmail = baseData.cardForm.ext.accEmail ?? '';
			const ifscCode = baseData.cardForm.ifsc;
			if (ifscCode !== null) {
				baseData.cardForm.ifsc = getBankLabel(ifscCode);
			}
		}
	}
	onMounted(() => {

		uni.setNavigationBarTitle({
			title: 'Quovo ' + t('Earn money so easy') + '!' 
		});
		baseData.cardForm.platform = uni.getStorageSync('platform');
		getCard();
	});
</script>

<style lang="scss" scoped>
@import '@/styles/bank.scss';
</style>